<a href="#" class="close"></a>


<style>
.close{
  position: absolute; top: 50%; left: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  margin: -25px 0 0 -25px;
}
.close:before,
.close:after{
  content: '';
  position: absolute; top: 0;
  width: 2px;
  height: 100%;
}
.close:before{
  left: calc(50% - 1px);  
  border-left: 2px dotted #00f;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.close:after{
  right: calc(50% - 1px); 
  border-right: 2px dotted #00f;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.close:hover:before,
.close:hover:after{
  border-color: #f00;
}
</style>
